<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单</title>
		<link rel="stylesheet" type="text/css" href="../../static/css/site.css"
			th:href="@{/css/site.css}"/>
		<link rel="stylesheet" type="text/css" href="../../static/css/cart.css"
			th:href="@{/css/cart.css}"/>
	</head>
	<body>
		<div th:replace="user/userfrag::header('确认订单',' ')"> </div>
		
		<div class="check-order">
			<div class="container">
				<div class="order-box">
					
					<div class="title">
						收货地址
					</div>
					
					<ul class="addr-list clear">
						<li th:data-id="${addr.id}" class="active" th:each="addr:${addresses}">
							<div class="name" th:text="${addr.contact}">
								张三
							</div>
							<div class="phone" th:text="${addr.phone}">
								158****6789
							</div>
							<div class="address" >
								<span class="province" th:text="${addr.province}">山东省</span>
								<span class="city" th:text="${addr.city}">青岛市</span>
								<span class="area" th:text="${addr.area}">城阳区</span>
								<span class="town" th:text="${addr.town}">城阳街道</span>
								<span class="detail" th:text="${addr.detail}">金日紫都 办公楼 A座 中享思途 三楼</span>
							</div>
						</li>
						
					</ul>
					
					
					<div class="title">
						商品及优惠劵
					</div>
					
					<div class="goods-list">
						<div class="goods-item clear" 
							th:each="details:${order.orderDetails}">
							<div class="img"><img src="../../static/img/big-phone.jpg" 
								th:src="@{'/upload/'+${details.goods.pictures[0].name}}"></div>
							<div class="name" ><a th:href="@{/goods(id=${details.goodsId})}" 
									th:text="${details.goods.name+' '+details.goods.version+' '+details.goods.color}">Xiaomi Civi 8GB+128GB 闪闪黑</a></div>
							<div class="price" 
									th:text="${details.price+'元 X '+details.count}">2599元 x 1</div>
							<div class="total" 
									th:text="${details.price*details.count+'元'}">2599元</div>
						</div>												
					
					</div>
					
					<div class="line"></div>
					
					<div class="title">
						<span>配送方式</span>
						<span class="info">包邮</span>
					</div>
					
					<div class="line"></div>
					
					<div class="title">
						<span>发票</span>
						<span class="info">电子普通发票 个人 商品明细</span>
					</div>
					
					<div class="bill clear">
						<div class="right">
							<div class="bill-item">
								<div class="bill-name">商品件数:</div>
								<div class="bill-price" th:text="${order.orderDetails.size()+'件'}">2件</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">商品总价:</div>
								<div class="bill-price" 
								th:text="${#aggregates.sum(order.orderDetails.![price*count])+'元'}">8098元</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">活动优惠:</div>
								<div class="bill-price">-0元</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">优惠券抵扣:</div>
								<div class="bill-price">-0元</div>
							</div>
							<div class="bill-item">
								<div class="bill-name">运费:</div>
								<div class="bill-price">0元</div>
							</div>
							<div class="bill-item total-price">
								<div class="bill-name">应付总额:</div>
								<div class="bill-money" ><span th:text="${#aggregates.sum(order.orderDetails.![price*count])}">8098</span>元</div>
							</div>
						</div>
					</div>
					
				</div>
				
				<div class="pay clear">
					<div class="right">
						<a href="cart.html" class="btn-cart">返回购物车</a>
						<a href="javascript:;" class="btn-pay">去结算</a>
					</div>
				</div>
				
			</div>
		</div>
		
		<!-- 底部 -->
		<div class="site-footer">
			<div class="container">
				<div class="footer-service">
					<ul class="clear">
						<li><a href=""><i class="mi-icon icon-util"></i>预约维修服务</a></li>
						<li><a href=""><i class="mi-icon icon-log"></i>7天无理由退货</a></li>
						<li><a href=""><i class="mi-icon icon-diamond"></i>15天免费换货</a></li>
						<li><a href=""><i class="mi-icon icon-heart"></i>满69包邮</a></li>
						<li><a href=""><i class="mi-icon icon-location"></i>520余家售后网点</a></li>
					</ul>
				</div>
			</div>
		</div>
			<script type="text/javascript" th:src="@{/js/jquery-2.1.4.js}"></script>
			<script type="text/javascript">
				$(".addr-list li").click(function(){
					$(".addr-list li").removeClass("active");
					$(this).addClass("active");
				});
				
				//结算事件
				$(".btn-pay").click(function(){
					var url = "[[@{/user/order/pay(orderId=${order.id})}]]";
					
					var addressId = $(".addr-list .active").attr("data-id");
					
					if(addressId == undefined){
						alert("请选择一个收货地址");
					}else{
						url += "&addressId="+addressId;
						
						//跳转
						window.location.href=url;
					}
					
				});
			</script>
	</body>
</html>
